<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item style="font-weight: bolder;">数据管理</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20" style="margin-top:20px ;">
      <el-col :span="12">
        <el-card class="card">
          <div class="inCard">
            <div class="chars">
              <h2 class="charsTitle">每月的营业额</h2>
              <div id='c1'></div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="card">
          <div class="inCard">
            <div class="chars">
              <h2 class="charsTitle">类目的热销榜</h2>
              <div id='c2'></div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        chart: null,
        chart_: null,
        data: [{
            month: '01月',
            money: 0
          },
          {
            month: '02月',
            money: 0
          },
          {
            month: '03月',
            money: 0
          },
          {
            month: '04月',
            money: 0
          },
          {
            month: '05月',
            money: 0
          },
          {
            month: '06月',
            money: 0
          },
          {
            month: '07月',
            money: 0
          },
          {
            month: '08月',
            money: 0
          },
          {
            month: '09月',
            money: 0
          },
          {
            month: '10月',
            money: 0
          },
          {
            month: '11月',
            money: 0
          },
          {
            month: '12月',
            money: 0
          }
        ]
      }
    },
    created() {
      this.getData()
      this.getHotSale()
    },
    mounted() {
      this.c1(this.data)
    },
    methods: {
      // 获取类目热销榜数据
      async getHotSale() {
        const hotsale = await this.$http.get('/ordering/hotsaleLeimu')
        this.c2(hotsale.data)
      },
      // 获取每月营业额数据
      async getData() {
        const data = await this.$http.get('/ordering/getTurnover')
        for (var i in data.data.turnover) {
          // this.dataC1.push(data.data.turnover[i])
          for (var j in this.data) {
            if (data.data.turnover[i].month === this.data[j].month.substr(0, 2)) {
              this.data[j].money = data.data.turnover[i].money
            }
          }
        }
        this.c1(this.data)
      },
      // 柱状图
      c1(data) {
        this.chart && this.chart.destroy()
        // Step 1: 创建 Chart 对象
        this.chart = new G2.Chart({
          container: 'c1', // 指定图表容器 ID
          width: 700, // 指定图表宽度
          height: 350 // 指定图表高度
        });
        // Step 2: 载入数据源
        this.chart.source(data);
        // Step 3：创建图形语法，绘制柱状图
        this.chart.interval().position('month*money');
        // Step 4: 渲染图表
        this.chart.render();
      },
      // 折线图
      c2(data) {
        this.chart_ && this.chart_.destroy()
        this.chart_ = new G2.Chart({
          container: 'c2', // 指定图表容器 ID
          width: 700, // 指定图表宽度
          height: 350 // 指定图表高度
        });
        // Step 2: 载入数据源
        this.chart_.source(data);
        this.chart_.scale({
          leimu: {
            range: [0, 1]
          },
          sales: {
            min: 0,
            nice: true
          }
        });

        this.chart_.tooltip({
          showCrosshairs: true, // 展示 Tooltip 辅助线
          shared: true
        });

        this.chart_.line().position('leimu*sales').label('sales');
        this.chart_.point().position('leimu*sales');

        this.chart_.render();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .card {
    overflow-x: auto;
  }

  .inCard {
    width: 550px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .chars {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .charsTitle {
      margin-bottom: 10px;
      font-size: 18px;
    }
  }
</style>
